<template>
<!--
首页
-->
  <div style="width: 100%;">
    <h3>待处理事件</h3>
    <div style="width: 100%;display: flex;justify-content: space-between">

      <div style="width: 30%;height:160px;background: orange;display: flex;justify-content: space-between">
        <div style="width: 20%;text-align: center;color: white; margin-top: 15px;margin-left: 20px">
          <h3>待审核</h3>
        <p style="font-size: xx-large;margin: 0">8条</p>
        </div>
        <img style="width: 100px;height: 100px;margin-top: 20px;margin-right: 30px" src="../../assets/img/homeimg/process.png" alt="">
      </div>


      <div style="width: 30%;height:160px;background: cornflowerblue;display: flex;justify-content: space-between">
        <div style="width: 20%;text-align: center;color: white; margin-top: 15px;margin-left: 20px">
          <h3>待处理</h3>
          <p style="font-size: xx-large;margin: 0">8条</p>
        </div>
        <img style="width: 100px;height: 100px;margin-top: 20px;margin-right: 30px" src="../../assets/img/homeimg/pending.png" alt="">
      </div>


      <div style="width: 30%;height:160px;background: orange;display: flex;justify-content: space-between">
        <div style="width: 20%;text-align: center;color: white; margin-top: 15px;margin-left: 20px">
          <h3>最新动态</h3>
          <p style="font-size: xx-large;margin: 0">8条</p>
        </div>
        <img style="width: 140px;height: 100px;margin-top: 15px;" src="../../assets/img/homeimg/news.png" alt="">
      </div>

    </div>
    <div style="width: 100%;margin-top: 30px;display: flex;justify-content: space-around ">
      <div style="width: 45%;height: 250px;background: #d9d9d9">
        <h3 style="margin-left: 20px">最新公告</h3>
        <div  style="display: flex; background: white;height: 200px">
          <ul  style="position: relative;left: 10%;">
            <li v-for="item in this.news.slice(0,this.key)">{{item.name}}</li>
          </ul>
          <ul style="position: relative;left: 40%;">
            <li v-for="item in this.news.slice(this.key)">{{item.name}}</li>
          </ul>
        </div>

      </div>
        <div style="width: 45%;height: 250px;background: #d9d9d9">
          <h3 style="margin-left: 20px">我的出勤状况</h3>
          <div style="display: flex;justify-content: space-around;background: white;height: 220px">
            <div style="width: 140px;height: 140px;background: orange;border-radius: 180px">
              <h4 >正常<span class="chu" >{{this.myMessage.normal}}</span>次</h4></div>
            <div style="width: 140px;height: 140px;background:cornflowerblue;border-radius: 180px">
              <h4>早退 <span class="chu">{{this.myMessage.absence}}</span> 次</h4></div>
            <div style="width: 140px;height: 140px;background: orange;border-radius: 180px">
              <h4>旷工<span class="chu">{{this.myMessage.askForLeave}}</span>次</h4></div>
            <div style="width: 140px;height: 140px;background: cornflowerblue;border-radius: 180px">
              <h4>请假<span class="chu">{{this.myMessage.beLate}}</span>次</h4></div>
          </div>
      </div>

    </div>
    <div style="width: 100%;margin-top: 30px;display: flex;justify-content: space-around ">
      <div style="width: 45%;height: 300px;background: #d9d9d9">
        <h3 style="margin-left: 20px;">最近入职</h3>
            <el-table :data="information" height="260">
              <el-table-column label="照片" width="120">
<!--                这里的scope获得:data的数据-->
                <template slot-scope="scope" style="background: #d9d9d9" >
                  <el-image style="width: 30px; height: 30px"
                            :src="'http://127.0.0.1:8080/infor/manyImg?call1='+scope.row.call1"
                            :preview-src-list="['http://127.0.0.1:8080/infor/manyImg?call1='+scope.row.call1]">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="project" label="所属项目组" width="120">
              </el-table-column>
              <el-table-column prop="call1" label="电话号码" width="120">
              </el-table-column>
              <el-table-column prop="mystatis" label="状态" width="120">
              </el-table-column>
            </el-table>
      </div>
      <div style="width: 45%;height: 300px;background: #d9d9d9">

        <h3 style="margin-left: 20px">考勤情况</h3>
        <div style="width: 100%;height: 240px;background: white">
          <home-pie></home-pie>
        </div>
      </div>

    </div>
  </div>


</template>

<script>
import axios from "axios";
import homePie from "../echarts/homeEch/homePie";

export default {
  name: "Home",
  components:{
    homePie
  },
  data(){
    return{
      information:[],
      myMessage:{},
      news:[],

    }
  },
  created() {
    this.getInfor();
      this.getMyInfor();
      this.getNews()
  },
  computed:{
    key(){
      if (this.news.length%2!=0){
        return this.news.length/2+1
      }
      return this.news.length/2
    }
  },
  methods:{
    getNews(){
      axios({
        url:'news/message',
        method:'get'
      }).then(res =>{
        this.news = res.data
      })

    },
    getMyInfor(){
      axios({
        url:"infor/myInfor",
        method: 'get',
      }).then(res => {
        this.myMessage = res.data;
      })
    },
    getInfor(){
      axios({
        url:"infor/information",
        method:'get',
      }).then(res =>{
        this.information = res.data
      })
    }

  }
}
</script>

<style scoped>
li{
  margin: 10px 0;
  cursor: pointer;
}
.chu{
  color: white;
  font-size: x-large
}
h4{
  position: relative;
  left: 26%;
  top: 24%;
}
img{
  width: 50px;
  height: 50px;
}

</style>
